<template>
	<div class="systemPage-wrapper">
		<div class="topbar">
			<span class="icon iconfont iconxitongpingtai-rizhiguanli"></span>
			<span>日志管理</span>
		</div>
		<div class="content-background">
			<div class="content-wrapper">
				<div class="searches-wrapper">
					<!-- <div class="row">
						<span>系统：</span>
						<el-input v-model="requestLog.requestLog.system" placeholder="请输入内容"></el-input>
					</div>
					<div class="row">
						<span>来源：</span>
						<el-input v-model="requestLog.requestLog.source" placeholder="请输入来源"></el-input>
					</div>
					<div class="row">
						<span>别名：</span>
						<el-input v-model="requestLog.requestLog.alias" placeholder="请输入别名"></el-input>
					</div>-->
					<div class="query-wrapper">
						<div class="query-box">
							<span class="span-name">IP：</span>
							<el-input class="systemInput" v-model="requestLog.requestLog.ip" placeholder="请输入IP"></el-input>
						</div>
						<div class="query-box">
							<span class="span-name">请求地址：</span>
							<el-input class="systemInput" v-model="requestLog.requestLog.url" placeholder="请输入请求地址"></el-input>
						</div>
						<div class="query-box">
							<span class="span-name">用户名：</span>
							<el-input class="systemInput" v-model="requestLog.requestLog.userName" placeholder="请输入请求地址"></el-input>
						</div>
						<div class="query-box">
							<span class="span-name">时间：</span>
							<el-date-picker
								class="systemDatePicker systemInput"
								range-separator="-"
								size="small"
								v-model="daterange"
								value-format="yyyy-MM-dd HH:mm:ss"
								type="datetimerange"
								align="right"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
								:default-time="['00:00:00', '23:59:59']"
								popper-class="logDatePicker"
							></el-date-picker>
						</div>
						<span class="systemButtonConfirm query-box" @click="search">查询</span>
						<span class="systemButtonConfirm query-box" @click="reset">重置</span>
					</div>
				</div>
				<el-table class="systemTable" v-if="tableShow" :data="tableData" stripe :height="tableHeight">
					<el-table-column prop="success" label="状态" width="60">
						<template slot-scope="scope">
							<span :class="scope.row.success ? 'success' : 'fail'">{{ scope.row.success ? '成功' : '失败' }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="ip" label="IP" width="110" show-overflow-tooltip></el-table-column>
					<el-table-column prop="url" label="请求地址" show-overflow-tooltip></el-table-column>
					<el-table-column prop="userName" label="用户名" width="80" show-overflow-tooltip></el-table-column>
					<el-table-column prop="createTime" label="创建时间" width="170" show-overflow-tooltip></el-table-column>
					<el-table-column prop="startTime" label="开始时间" width="170" show-overflow-tooltip></el-table-column>
					<el-table-column prop="endTime" label="结束时间" width="170" show-overflow-tooltip></el-table-column>
					<el-table-column label="操作" width="80" align="center">
						<template slot-scope="scope">
							<el-button size="mini" class="systemButtonDefault" @click="logDetailShow(scope.row)">详情</el-button>
							<!-- <span class="operation" @click.stop="logDetailShow(scope.row)">详情</span> -->
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					class="systemPagination"
					:current-page="pageIndex"
					:page-sizes="[originPageSize, 20, 30, 40]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="totalCount"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
				>
					<span class="totalCount">从{{ start }}到{{ end }}/共{{ totalCount }}条数据</span>
				</el-pagination>
			</div>
		</div>
		<div class="maskCenter" v-if="dialogTableVisible">
			<div class="systemDialog">
				<div class="dialog-header" v-winmove>
					<span>详情</span>
					<span class="icon iconfont iconbiaoqianlan-guanbi" @click="dialogTableVisible = false"></span>
				</div>
				<div class="dialog-body">
					<el-form v-model="currentLogData" label-width="80px" label-position="left">
						<el-row>
							<el-col :span="12">
								<el-form-item label="用户名:">
									<span>{{ currentLogData.userName }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="别名:">
									<span>{{ currentLogData.alias }}</span>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="12">
								<el-form-item label="日志编号:">
									<span>{{ currentLogData.id }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="设备:">
									<span>{{ currentLogData.device }}</span>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="12">
								<el-form-item label="来源:">
									<span>{{ currentLogData.source }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="创建时间:">
									<span>{{ currentLogData.createTime }}</span>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="12">
								<el-form-item label="开始时间:">
									<span>{{ currentLogData.startTime }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="结束时间:">
									<span>{{ currentLogData.endTime }}</span>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="12">
								<el-form-item label="IP:">
									<span>{{ currentLogData.ip }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="系统:">
									<span>{{ currentLogData.system }}</span>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="12">
								<el-form-item label="类名:">
									<span>{{ currentLogData.clazz }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="方法:">
									<span>{{ currentLogData.method }}</span>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-form-item label="参数:">
								<el-input class="systemInput" v-model="currentLogData.params" type="textarea" autosize></el-input>
							</el-form-item>
						</el-row>
						<el-row>
							<el-form-item label="结果:">
								<el-input class="systemInput" v-model="currentLogData.result" type="textarea" autosize></el-input>
							</el-form-item>
						</el-row>
						<el-form-item label="状态:">
							<span>{{ currentLogData.success ? '成功' : '失败' }}</span>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { logList, logDetail } from '@/system/api/log'
	import winmove from '@/directives/winmove'

	export default {
		data() {
			return {
				tableShow: false,
				tableData: [],
				pageIndex: 1,
				totalCount: 0,
				tableHeight: 0,
				pageSize: 0,
				requestLog: {
					requestLog: {},
				},
				currentLogData: [],
				dialogTableVisible: false,
				daterange: '',
				start: 1,
				end: null,
				originPageSize: null,
			}
		},
		directives: {
			winmove,
		},
		async mounted() {
			await this.getTableHeight()
			this.tableShow = true
			this.tableInitialization()
		},
		methods: {
			// table高度
			getTableHeight() {
				let contentHeight = document.getElementsByClassName('content-wrapper')[0].offsetHeight
				let searchesHeight = document.getElementsByClassName('searches-wrapper')[0].offsetHeight
				this.tableHeight = contentHeight - searchesHeight - 92
				let tableBodyHeight = this.tableHeight - 40
				this.pageSize = parseInt(tableBodyHeight / 40)
				this.originPageSize = this.pageSize
			},
			// table初始化
			tableInitialization() {
				this.requestLog.pageSize = this.pageSize
				this.requestLog.pageIndex = this.pageIndex - 1
				logList(this.requestLog).then(res => {
					if (res.success) {
						this.tableData = res.info
						this.totalCount = res.totalCount
						this.end = res.totalCount % this.pageSize === 0 ? parseInt(res.totalCount / this.pageSize) : parseInt(res.totalCount / this.pageSize) + 1
					} else {
						this.message(res.msg, 3)
						this.tableData = []
						this.totalCount = 0
						return
					}
				})
			},
			// 翻页
			handleCurrentChange(e) {
				this.pageIndex = e
				this.tableInitialization()
			},
			handleSizeChange(e) {
				this.pageSize = e
				this.search()
			},
			// 查询
			search() {
				if (this.daterange !== null) {
					this.requestLog.requestLog.startTime = this.daterange[0]
					this.requestLog.requestLog.endTime = this.daterange[1]
				} else {
					delete this.requestLog.requestLog.startTime
					delete this.requestLog.requestLog.endTime
				}
				this.pageIndex = 1
				this.tableInitialization()
			},
			// 重置
			reset() {
				this.pageIndex = 1
				this.daterange = ''
				this.requestLog = {
					requestLog: {},
					pageSize: this.pageSize,
					pageIndex: this.pageIndex,
				}
				this.tableInitialization()
			},
			// log详情
			logDetailShow(e) {
				logDetail({ id: e.id }).then(res => {
					if (res.success) {
						this.currentLogData = JSON.parse(JSON.stringify(res.info))
						let params = JSON.stringify(res.info.params, null, 2)
						let result = JSON.stringify(res.info.result, null, 2)
						this.currentLogData.params = params
						this.currentLogData.result = result
						this.dialogTableVisible = true
					} else {
						this.message(res.msg, 3)
						return
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content-background {
		display: block !important;
	}
	.systemPage-wrapper {
		.query-box .el-date-editor {
			&:hover {
				background: var(--input-hover-back-color) !important;
				border: 1px solid var(--input-focus-border-color) !important;
				box-shadow: var(--input-shadow) !important;
			}

			&:focus {
				background: var(--input-focus-back-color) !important;
				border: 1px solid var(--input-focus-border-color) !important;
			}

			&:disable {
				background: var(--system-form-input-disabled-bgc) !important;
				border: 1px solid var(--system-form-input-disabled-border-color) !important;
				color: rgba(153, 153, 153, 1) !important;
			}

			::v-deep.el-range-input {
				border: none !important;
			}
		}

		.systemDialog {
			width: 50%;
			height: 70%;

			.el-row,
			.el-form-item,
			::v-deep.el-form-item__label {
				text-align: left;
				color: var(--system-form-text-color);
			}
		}
	}
</style>
